<template>
  <div class="home">
    <el-container>
      <el-header class = "layout-header">
        <div>
          <div style="float: right;">
        <el-menu :default-active="activeIndex" class="el-tabs__nav" mode="horizontal" @select="handleSelect" style="border-bottom: none">

          <el-menu-item  class="index1" @click="handleMenuClick('/student/index')">首页</el-menu-item>
          <el-menu-item  class="index1" @click="handleMenuClick('/student/anotherWeb/ExamCenter')">试卷中心</el-menu-item>
          <el-menu-item  class="index1" @click="handleMenuClick('/student/anotherWeb/IntelligentTraining')">视频课堂</el-menu-item>
          <el-menu-item  class="index1" @click="handleMenuClick('/student/anotherWeb/VideoClass')">智能训练</el-menu-item>
          <el-menu-item  class="index1" @click="handleMenuClick('/student/anotherWeb/ExamCenter')">考试记录</el-menu-item>

          <el-dropdown @command="handleCommand" class="index">
            <el-avatar shape="square" size="medium"
                       src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" style="width: 40px;height: 40px;border-radius: 100px;margin-top: 8px"></el-avatar>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-document" command="openEditInfoDialog">个人中心</el-dropdown-item>
              <el-dropdown-item icon="el-icon-coordinate" command="openEditAvatarDialog">消息中心</el-dropdown-item>
              <el-dropdown-item icon="el-icon-right" divided command="openLogoutConfirm">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu>
          </div>
          <div style="width: 200px;">
            <img src="https://www.mindskip.net:7001/assets/logo.7098b5f4.png" style="width: 120px;height: 40px; float: left;">
          </div>
        </div>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
      <el-footer> <div class="layout-footer">
        <el-row>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div>
                <p class="layout-footer_p" style="margin-left: -60px">产品介绍</p>
                <p class="layout-footer_p1">思多多智能考试系统</p>
                <p class="layout-footer_p1">维多多培训考试系统</p>
                <p class="layout-footer_p1">学子思开源考试系统</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div>
                <p class="layout-footer_p"style="margin-right: 30px">文档中心</p>
                <p class="layout-footer_p1">学子思仓库地址</p>
                <p class="layout-footer_p1">学子思开发文档</p>
                <p class="layout-footer_p1">学子思视频教程</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <p class="layout-footer_p" style="margin-left: -190px">关于我们</p>
              <div style="float: left">
                <img src="https://www.mindskip.net:7001/assets/4.31965418.jpg" style="width: 125px;height: 126px;margin-left: 30px">
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <div>
                <p class="layout-footer_p" style=" margin-left: -240px">微信小程序</p>
                <div style="float: left">
              <span>
                <img src="https://www.mindskip.net:7001/assets/3.b393a90d.jpg" style="width: 100px;height: 100px;margin-right: 10px">
              </span>
                  <span>
                <img src="https://www.mindskip.net:7001/assets/7.94eda29f.jpg" style="width: 100px;height: 100px">
              </span>
                  <span>
                <img src="https://www.mindskip.net:7001/assets/1.28df5999.jpg" style="width: 100px;height: 100px;margin-left: 10px">
              </span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div></el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
    };
  },
  methods: {
    handleMenuClick(path) {
      if (this.$route.path !== path) {
        this.$router.push(path);
      }
    },
    handleCommand(command) {
          if (command == 'openEditInfoDialog') {
            console.log('点击了：个人中心');
          } else if (command == 'openEditAvatarDialog') {
            console.log('点击了：消息中心');
          } else if (command == 'openLogoutConfirm') {
            console.log('点击了：退出登录');
          }
        }

  },
}
</script>
<style>

.el-header {
  color: #fff;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
}

.el-tabs__nav{
  text-align: center;
  background-color:#fff;
  width: 100%;
  height: 40px;
  border-bottom: none;
}

.index1 {
  font-size: 25px;
  color: #333;
  padding: 0 16px;

}

.index1:hover {
  background-color: #f5f5f5;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

.layout-footer {
  padding: 20px;
  text-align: center;
}

.layout-footer_p {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333333;
}

.layout-footer_p1 {
  font-size: 14px;
  margin-bottom: 5px;
  color: #333333;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  padding: 10px;
  color: white;
}

</style>
